@import "../../../../global";

.web-form-designer-drawer {
    .ant-drawer-body {

        #content-labels {
            width: 20px !important;
        }

        .form-validation {
            .ant-form-item-with-help {
                margin-bottom: 0px;
            }

            .has-error, .has-success {
                width: 100%;
            }

            .has-error .ant-form-explain {
                .ux-error-input;
                width: 100%;
                top: -27px;
                display: none;
            }
        }

        .setting-form {
            &-row {
                z-index: 10 !important;
                .form-validation;

                .ant-col {
                    padding-left: 8px;
                }
            }

            &-cell {

                .form-validation;

                .ant-alert {
                    margin-left: 2px;
                    margin-top: 2px;
                }

                .ant-switch {
                    background-color: #a8a8a8;

                    &-checked {
                        background-color: @primary-color;
                    }

                    &-disabled {
                        background-color: @font-disabled;
                    }
                }

                .ant-form-item {
                    margin-right: 0px !important;
                }

                .ant-col {
                    margin-bottom: 0px;
                }

                z-index: 10 !important;

                .ux-success-setting {
                    .ux-success;
                    height: 36px;
                    width: 100px;
                    border-radius: 18px;
                    font-size: 16px;

                    i {
                        font-size: 16px;
                    }
                }

                .render {
                    img {
                        width: 40px;
                        height: auto;
                        margin-right: 12px;
                    }

                    label {
                        font-size: 16px;
                        color: @color-highlight;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .ant-drawer-close {
        .ix-box.square(36px);
        color: #0d152a;
        background-color: #fafafa;
        border: solid 1px #d8d8d8;
        border-radius: 2px;

        &:hover {
            background-color: @button-spec;
            border: solid 1px @button-spec;
            color: white;
        }
    }
}

.web-form-row-drawer {
    .ant-drawer-body {
        padding: 0 16px 16px 0;
    }

    .web-form-designer-drawer;

    .ant-drawer-content-wrapper {
        width: 30% !important;
    }
}

.web-form-cell-drawer {
    .ant-drawer-body {
        padding: 0 0 16px 0;
    }

    .web-form-designer-drawer;

    .ant-drawer-content-wrapper {
        width: 56% !important;
    }

    .tool-setting {

        .ant-alert {
            margin-bottom: 3px;
        }

        .ant-tabs-right-content {
            padding-right: 4px;
        }

        .ant-tabs-tab {
            &:hover {
                background-color: @primary-color !important;
                color: yellow !important;
            }

            &-active {
                background-color: @primary-color !important;
                color: white !important;

                &:hover {
                    color: yellow !important;
                }
            }

        }
    }

    .radio {
        &-input-3 {
            .ant-radio-wrapper {
                width: 30%;
                line-height: 28px;
                height: 28px;
            }
        }

        &-input-4 {
            .ant-radio-wrapper {
                width: 23%;
                line-height: 28px;
                height: 28px;
            }
        }
    }
}